<!--供应商-->
<template>
  <div>
    <el-select v-model="userId" :multiple="multiple" :placeholder="'请选择'" clearable filterable style="width: 100%;"
               @change="userChange" @clear="clear">
      <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId">
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>

import {listUser} from '@/api/system/user'

const userList = ref<any>([])
const userId = ref("")
const orgId = ref("")
const emits = defineEmits(["userChange"])
const props = defineProps({
  orgId: {
    type: String,
    default: ""
  },
  id: {
    type: String,
    default: ''
  },
  multiple: {
    type: Boolean,
    default: false
  }
})
watch(() => props.id, (newValue, _oldValue) => {
  userId.value = newValue
}, {deep: true, immediate: true})

watch(() => props.orgId, (newValue, _oldValue) => {
  orgId.value = newValue
  if (orgId.value) {
    getUserList()
  }

}, {immediate: true, deep: true})

function getUserList() {
  const param = {delFlag: '0', orgId: orgId.value}
  listUser(param).then((res: any) => {
    userList.value = res.rows
  })
}

function userChange(value) {
  if (!props.multiple) {
    let userInfo = {}
    let index = userList.value.findIndex((item: any) => {
      return item.userId === value
    })
    if (index > -1) {
      userInfo = userList.value[index]
    }
    emits("userChange", userInfo)
  } else {
    let userInfoArray: any = []
    value.forEach((valueItem: any) => {
      let index = userList.value.findIndex((item: any) => {
        return item.userId === valueItem
      })
      if (index > -1) {
        userInfoArray.push(userList.value[index])
      }
    })
    emits("userChange", userInfoArray)
  }
}

function clear() {
  emits("userChange", null)

}

function setSelectedValue() {
  userId.value = ""
  // clear()
}

defineExpose({
  setSelectedValue
})
</script>

<script lang="ts">
export default {
  name: "sysUser"
}
</script>

<style scoped></style>
